<script lang="ts" setup>
import IdTimeForm from '@/components/form/IdTimeForm.vue'
import { queryBikeCheck } from '@/api/bike'
import {
  queryBikeCheckCol,
  resultDetailsType,
  queryBikeCheckRequestData
} from '@/api/bike/types/bike'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
import { reactive, ref, onMounted, onActivated, defineAsyncComponent } from 'vue'
import { useActivated } from '@/hooks/useActivated'

import { useRoute } from 'vue-router'
defineOptions({
  name: 'FaultRecord'
})
const BikeCheckResultDialog = defineAsyncComponent(
  () => import('@/components/dialog/BikeCheckResult.vue')
)
const BikeCheckResultDialogRef = ref()
const route = useRoute()
const form = reactive<queryBikeCheckRequestData>({
  bikeCode: (route.query.bikeCode as string) || '',
  startTime: '',
  endTime: '',
  bikeId: (route.query.bikeId as string) || ''
})
const { data, pagination, handleCurrentChange, handleSizeChange, load, loading } =
  useTable<queryBikeCheckCol>(queryBikeCheck, getToken() ?? '', () => form)
const resultDetails = ref<resultDetailsType[]>()
const showDialog = (row: queryBikeCheckCol) => {
  resultDetails.value = row.resultDetails
  BikeCheckResultDialogRef.value.open()
}
onMounted(() => {
  load()
})
onActivated(() => {
  form.bikeCode = (route.query.bikeCode as string) || ''
  form.bikeId = (route.query.bikeId as string) || ''
})
/** 处理是否缓存 */
useActivated(
  form,
  { form },
  [
    { key: 'startTime', path: 'form.startTime' },
    { key: 'endTime', path: 'form.endTime' }
  ],
  load,
  []
)
/** 提交表单 */
const handleSubmit = () => {
  load()
}
</script>

<template>
  <div class="xy-container">
    <id-time-form v-model="form" @submit="handleSubmit" />
    <el-table :data="data" v-loading="loading">
      <el-table-column prop="createdTime" label="检测时间" />
      <el-table-column prop="result" label="检测结果">
        <template #default="scope">
          <span v-if="scope.row.errCount == 0" style="color: var(--xy-success-color)">无异常</span>
          <span v-else style="color: var(--xy-danger-color)">{{ scope.row.errCount }}项异常</span>
        </template>
      </el-table-column>
      <el-table-column label="检测结果">
        <template #default="scope">
          <el-button link type="primary" class="is-show" @click="showDialog(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
    <bike-check-result-dialog ref="BikeCheckResultDialogRef" :resultDetails="resultDetails" />
  </div>
</template>

<style></style>
